<template>
    <div class="container">
        <editor v-model="content" :init="editorConfig" api-key="5ddjymbagepb4qcm1y9x9kldpknnkhazr8rspb1663abw96e" />
    </div>
</template>

<script>
import Editor from '@tinymce/tinymce-vue';

export default {
    name: 'SimpleEditor',
    components: {
        editor: Editor
    },
    data() {
        return {
            content: `
<span class="mceNonEditable" data-mce-copyid="content-section-1">复制内容1</span>
<section id="content-section-1" data-role="outer" label="edit by 135editor">
    <section data-tools="135编辑器" data-id="107107">
        <section style="text-align: center;margin: 10px auto;">
            <section style="background-color: rgb(255, 255, 255);padding: 9px;">
                <section style="border-width: 1px;border-style: solid;border-color: rgb(217, 150, 148);">
                    <section style="width: 35px;height: 35px;background-color: rgb(217, 150, 148);transform: translate(-2px, -2px);">
                        <section style="font-size: 16px;letter-spacing: 1.5px;color: #fff;line-height: 35px;">
                            <strong data-original-title="" title="">01</strong>
                        </section>
                    </section>
                    <section data-autoskip="1" style="padding: 10px 25px 20px;text-align: justify;line-height: 1.75em;letter-spacing: 1.5px;font-size: 14px;color: rgb(53, 50, 59);background: transparent;">
                        <p>
                            问：你体重多少？<span lang="EN-US"><o:p></o:p></span>
                        </p>
                        <p>
                            答：我只接受党和组织的调查。
                        </p>
                    </section>
                </section>
            </section>
        </section>
    </section>
</section>

<span class="mceNonEditable" data-mce-copyid="content-section-2">复制内容2</span>
<section id="content-section-2" data-role="outer" label="edit by 135editor">
    <section data-tools="135编辑器" data-id="107107">
        <section style="text-align: center;margin: 10px auto;">
            <section style="background-color: rgb(255, 255, 255);padding: 9px;">
                <section style="border-width: 1px;border-style: solid;border-color: rgb(217, 150, 148);">
                    <section style="width: 35px;height: 35px;background-color: rgb(217, 150, 148);transform: translate(-2px, -2px);">
                        <section style="font-size: 16px;letter-spacing: 1.5px;color: #fff;line-height: 35px;">
                            <strong data-original-title="" title="">02</strong>
                        </section>
                    </section>
                    <section data-autoskip="1" style="padding: 10px 25px 20px;text-align: justify;line-height: 1.75em;letter-spacing: 1.5px;font-size: 14px;color: rgb(53, 50, 59);background: transparent;">
                        <p>
                            问：你最满意身上哪个部位？<span lang="EN-US"><o:p></o:p></span>
                        </p>
                        <p>
                            答：最满意那双看不上你的眼睛。
                        </p>
                    </section>
                </section>
            </section>
        </section>
    </section>
</section>
            `,
            editorConfig: {
                menubar: false,
                statusbar: false,
                branding: false,
                visual: false,
                elementpath: false,
                mobile: {
                    plugins: ['autosave', 'lists', 'autolink'],
                    toolbar: false
                },
                plugins: [
                    'advlist autolink lists link image charmap print preview anchor',
                    'searchreplace visualblocks code fullscreen noneditable',
                    'insertdatetime media table paste code help wordcount'
                ],
                toolbar: false,
                noneditable_noneditable_class: 'mceNonEditable',
                content_style: `
                    body {
                        font-family: Helvetica, Arial, sans-serif;
                        font-size: 14px;
                        padding: 10px;
                        box-sizing: border-box;
                        max-width: 100vw;
                        word-wrap: break-word;
                    }
                    img {
                        max-width: 100%;
                        height: auto !important;
                        object-fit: contain;
                        display: block;
                        margin: 10px auto;
                    }
                    p {
                        margin: 0;
                        padding: 0;
                    }
                    .mceNonEditable {
                        background-color: #4CAF50;
                        color: white;
                        padding: 10px 20px;
                        text-align: center;
                        text-decoration: none;
                        display: inline-block;
                        font-size: 16px;
                        margin: 4px 2px;
                        cursor: pointer;
                        user-select: none;
                    }
                `,
                setup: editor => {
                    editor.on('init', () => {
                        editor.on('click', e => {
                            if (e.target.classList.contains('mceNonEditable')) {
                                const idToCopy = e.target.getAttribute('data-mce-copyid');
                                if (idToCopy) {
                                    const nodeToCopy = editor.dom.get(idToCopy);
                                    if (nodeToCopy) {
                                        const htmlToCopy = nodeToCopy.outerHTML;
                                        this.copyToClipboard(htmlToCopy, editor);
                                    }
                                }
                            }
                        });
                    });
                }
            }
        };
    },
    methods: {
        copyToClipboard(text, editor) {
            const textarea = document.createElement('textarea');
            textarea.value = text;
            textarea.style.position = 'fixed';
            document.body.appendChild(textarea);
            textarea.focus();
            textarea.select();

            try {
                const successful = document.execCommand('copy');
                if (successful) {
                    editor.notificationManager.open({
                        text: '内容已复制到剪贴板',
                        type: 'success',
                        timeout: 3000
                    });
                } else {
                    throw new Error('Copy command was unsuccessful');
                }
            } catch (err) {
                console.error('复制失败:', err);
                editor.notificationManager.open({
                    text: '复制失败，请手动复制',
                    type: 'error',
                    timeout: 3000
                });
            } finally {
                document.body.removeChild(textarea);
            }
        }
    }
};
</script>
<style scoped>
.container {
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

:deep(.tox-tinymce) {
    border: none !important;
    height: 100% !important;
    max-height: 100vh !important;
}

:deep(.tox-editor-container) {
    height: 100% !important;
}

:deep(.tox-edit-area) {
    height: 100% !important;
}

:deep(.tox-edit-area__iframe) {
    height: 100% !important;
}
</style>
